<template>
  <div>
    <el-tree
      ref="tree"
      :data="treeConfig.treeData"
      node-key="nns_menu_no"
      :render-content="renderContent"
      :show-checkbox="treeConfig.hasCheckBox ? treeConfig.hasCheckBox : false"
      :default-expanded-keys="['0']"
      :default-checked-keys="treeConfig.defaultCheckedKeys"
      :props="props"
      label="menu_name"
      :expand-on-click-node="false"
      :highlight-current="true"
      @check="handleCheckChange"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'YlTree',
  props: {
    treeConfig: {
      type: Object,
      default: () => {}
    },
    props: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    renderContent (h, { node, data, store }) {
      let classname = ''
      if (node.data.children.length === 0 && !node.data.nns_menu_url) {
        classname = 'levelname'
      }
      return (
        // 变更操作 JSX重写逻辑 阻止 node-click 事件冒泡 导致方法覆盖
        <p class={classname} id="tree-node-btn">
          <span
            on-click={ () => this.handleNodeClick(node.data.nns_id) }
            style="letter-spacing: 2px; display: flex; flex-direction: row"
          >
            {node.data.nns_menu_name}
            <span
              style={ (this.treeConfig.hasMenuInfo && Number.parseInt(node.data.nns_menu_no) !== 0) ? 'display: block' : 'display: none' }
            >
              (编号:<span>{node.data.nns_menu_no}</span> 排序:<span>{Number.parseInt(node.data.nns_order) < 10 ? '0' + node.data.nns_order : node.data.nns_order}</span>)
            </span>
            <span
              style=" margin-left: 15px"
              style={ Number.parseInt(node.data.nns_menu_no) !== 0 ? 'display: block' : 'display: none' }
            >
              状态:{ node.data.nns_menu_state === 1 ? <span style="color: #1896af">开启</span> : <span class="info">关闭</span> }
            </span>
          </span>
          <div style={ (this.treeConfig.hasMenuBtn && Number.parseInt(node.data.nns_menu_no) !== 0) ? 'display: block' : 'display: none' }>
            <YlButton
              uiType="main"
              btnType="danger"
              on-click={ () => this.handleDelete(node.data.nns_id) }
            >
              <span>删 除</span>
            </YlButton>
            {
              // 判断按钮显示单一原则
              node.data.nns_menu_state !== 1
                ? <YlButton
                  uiType="main"
                  btnType="success"
                  on-click={ () => this.handleOpen(node.data.nns_id) }
                >
                  <span>开 启</span>
                </YlButton>
                : <YlButton
                  uiType="main"
                  btnType="info"
                  on-click={ () => this.handleClose(node.data.nns_id) }
                >
                  <span>关 闭</span>
                </YlButton>
            }
          </div>
        </p>
      )
    },
    // 多选获取数据
    handleCheckChange (...val) {
      // let nodes = val[1].checkedNodes
      let nodes = this.$refs.tree.getCheckedNodes(false, true)
      let arr = []
      for (let i in nodes) {
        arr.push(nodes[i][this.treeConfig.node_key])
      }
      this.$emit('check-node', arr)
    },

    // 删除
    async handleDelete (id) {
      await this.$modal.confirm(this, {
        api: this.treeConfig.deleteApi,
        message: '删除成功',
        obj: id
      })
        ? this.$emit('init-state', true)
        : this.$emit('init-state', false)
    },

    // 开启菜单
    async handleOpen (id) {
      await this.$modal.confirm(this, {
        api: this.treeConfig.methodMenuApi,
        obj: {
          menu_ids: id,
          op: 1
        },
        warning: '是否开启菜单?'
      })
        ? this.$emit('init-state', true)
        : this.$emit('init-state', false)
    },

    // 关闭菜单
    async handleClose (id) {
      await this.$modal.confirm(this, {
        api: this.treeConfig.methodMenuApi,
        obj: {
          menu_ids: id,
          op: 0
        },
        warning: '是否关闭菜单?'
      })
        ? this.$emit('init-state', true)
        : this.$emit('init-state', false)
    },
    // 修改时 传递nns_id
    handleNodeClick (id) {
      if (Number.parseInt(id) !== 0) {
        this.$emit('open-node', id)
      } else {
        this.$modal.warning(this, '此菜单不能更改')
        return false
      }
    }
  }
}
</script>

<style lang="scss">
.el-tree {
  padding: 12px 24px;
}
.el-tree-node__content {
  height: 60px;
  p {
    color: #808181;
  }
}
.el-tree-node__content span.levelname {
  float: left;
  width: 126px;
}

#tree-node-btn {
  display: flex;
  flex: 1;
  align-items: center;

  .el-button {
    margin-left: 10px;
  }
}
</style>
